<template>
  <div>
    <h2>{{ message }}--{{ xfy.info.grade }}</h2>
    <button @click="changemess">watch改变信息</button>
    <button @click="changeInfo">watch对象里面的信息</button>
  </div>
</template>

<script>
import { watch, watchEffect, reactive, ref } from "vue";
export default {
  setup(props) {
    let message = ref("我是watch的消息");
    const xfy = reactive({
      name: "xfy",
      hobby: "爱好学习",
      info: {
        grade: 1308,
      },
    });
    let shop = watchEffect(onInvailted => {
      // watchEffect是一个函数  需要传入一个回调函数
      // 改函数有一个返回值  一般叫stop  可以用来取消监听
      // 传入的函数中有一个 onInvailted   这个是用来清除副作用
      // 比如三个tab标签  进来第一个页面时  数据没有回来
      // 而我们进行第二次进行请求 此时我们可以通过这个参数去清除上一次的网络请求所带来的影响(数据改变 ，页面刷新)
      // onInvailted(()=>{
      // 在这里取消请求
      // 组件销毁时也会调用
      // })
      console.log("message:", message.value);
      console.log("许方言的信息:", xfy.info.grade);
    });
    const changemess = () => {
      message.value = "新的watch消息哟";
    };
    const changeInfo = () => {
      xfy.info.grade = 418;
      if (xfy.info.grade > 1000) {
        shop(); //取消监听
      }
    };
    return {
      message,
      xfy,
      changemess,
      changeInfo,
    };
  },
};
</script>

<style></style>
